<template>
  <div class="footer">
    <!-- 提交定制开发流程 -->
    <div class="customized">
      <div class="customized_con">
        <div class="title">
          <span>提交定制开发需求</span>&nbsp;&nbsp;
          <span>多一次咨询，多一个选择</span>&nbsp;&nbsp;
          <span>联系我们，免费获得专属策划方案</span>
        </div>
        <div class="customized_sr">
          <div class="put">
            <input type="text" @input="inputL" v-model="demand" maxlength="20" placeholder=" 一句话描述自己的需求，例如：多用户商城 " />
            <div class="num">
              <span>{{demandNum}}</span>
              /
              <span>20</span>
            </div>
          </div>

          <input type="text" placeholder="请输入姓名" v-model="name" />
          <input type="text" placeholder="请输入手机号码" maxlength="11" v-model="mobile" />
          <div class="btn" @click="submit">
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconfoot/6.png" alt />
            <span>免费提交评估</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 服务 -->
    <div class="servicw">
      <ul class="servicw_content">
        <li>
          <img style="width:75px;height:75px" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/15.png" alt />
          <!-- <img style="width:75px" src="../../assets/iconf/17.png" alt=""> -->
          <div class="wz">
            <span>低价透明</span>
            <span>统一报价，无隐形消费</span>
          </div>
        </li>
        <li>
          <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/home/jp02.png" alt /> -->
          <img style="width:75px;height:75px" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/16.png" alt />

          <div class="wz">
            <span>金牌服务</span>
            <span>一对一专属顾问7*24小时金牌服务</span>
          </div>
        </li>
        <li>
          <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/home/kb03-2.png" alt /> -->
          <img style="width:75px;height:75px" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/17.png" alt />

          <div class="wz">
            <span>信息保密</span>
            <span>个人信息安全有保障</span>
          </div>
        </li>
        <li>
          <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/home/sh01-2.png" alt /> -->
          <img style="width:75px;height:75px" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/18.png" alt />
          <div class="wz">
            <span>售后无忧</span>
            <span>服务出问题客服经理全程跟进</span>
          </div>
        </li>
      </ul>
    </div>
    <!-- 底部导航 -->
    <div class="nav_bot">
      <ul>
        <li>
          <h3>联系我们</h3>
          <div class="mobile">
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/foot1.png" alt="">
            <div class="mobile_r">
              <span>150-0001-7750</span>
              <span>(周一至周日: 9:00-21:00)</span>
            </div>
          </div>
          <div class="area">
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/foot2.png" alt="">
            <span>合肥市滨湖新区未来塔A座710室</span>
          </div>
        </li>
        <li>
          <h3>咨询我们</h3>
          <div class="qq">
            <div class="qq_o">
              <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=403176253&amp;site=qq&amp;menu=yes" target="_blank">

                <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/footqq.png" alt="">
                <span>合作咨询</span>
              </a>
            </div>
            <div class="qq_t">
              <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=403176253&amp;site=qq&amp;menu=yes" target="_blank">

                <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/footqq.png" alt="">
                <span>技术服务</span>
              </a>
            </div>

          </div>
          <div class="youqing">
            <span>友情链接：</span>
            <span>合肥网站建设</span>&nbsp;&nbsp;&nbsp;
            <span>合肥APP开发</span>&nbsp;&nbsp;&nbsp;
            <span>合肥小程序开发</span>&nbsp;&nbsp;&nbsp;
            <span>合肥Web3D开发</span>&nbsp;&nbsp;&nbsp;
          </div>
        </li>
        <li>
          <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/foot3.png" alt="">
          <span>微信公众号</span>
        </li>
      </ul>
    </div>
    <div class="beian">
      <div class="beian_con">
        <div class="be_l">
          <span>©2019 All Rights Reserved 合肥景烨网络科技有限公司 &nbsp;&nbsp;皖ICP备16006561号-2 </span>
          <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/foot4.png" alt="">  -->
        </div>
        <div class="be_r">
          <span>
            [原创设计 , 独立版权 , 未经许可 , 不得拷贝或镜像]
          </span>

        </div>
        <div class="beianhao">
          <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=34011102001703" style="display:inline-block;text-decoration:none;">
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/foot4.png" />
            <p style="float:left; color:#9c9c9c;">皖公网安备 34011102001703号</p>
          </a>
        </div>
      </div>
    </div>
    <!-- <div class="nav_bot">
      <div class="container_t">
        <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/home_logo.png" alt />
        <ul>
          <li>
            <router-link to="/index/index/index">首页</router-link>
          </li>
          <li>
            <router-link to="/index/fuwu/website">服务</router-link>
          </li>
          <li>
            <router-link to="/index/example/index">案例</router-link>
          </li>
          <li>
            <router-link to="/index/news/index">社区</router-link>
          </li>
          <li>
            <router-link to="/index/about/index">关于景烨</router-link>
          </li>
        </ul>
        <div class="t_top" @click="backTop"></div>
      </div>
    </div> -->
    <!-- 联系方式 -->
    <!-- <div class="contact">
      <div class="container_t">
        <div class="contact_left">
          <div class="phone">
            <span>全国服务热线</span>
            <span>150-0001-7750 / 177-5601-6535</span>
          </div>
          <div class="bott">
            <span>地址：安徽省合肥市包河区滨湖新区庐州大道未来塔A座710</span>
            <span>邮箱：miao.jl@jyecloud.cn</span>
            <span>Q Q：403176253 / 3177489836</span>
          </div>
        </div>
        <div class="contact_right">
          <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/home/ewm02.png" alt />
          <span>微信公众号</span>
        </div>
      </div>
    </div> -->
    <!-- 地址 -->
    <!-- <div class="area">
      <div class="container_t">
        <span>
          ©2015-2019 All Rights Reserved&nbsp; 合肥景烨网络科技有限公司
          &nbsp;皖ICP备16006561号-2
        </span>
        <span>公司地址：安徽省合肥市包河区未来塔B座710室</span>
      </div>
    </div> -->
    <!-- 移动端 -->
    <!-- <div class="mNav_b">
      <ul>
        <li>
          <router-link to="/index/index/index">首页</router-link>
        </li>
        <li>
          <router-link to="/index/service/index">服务</router-link>
        </li>
        <li>
          <router-link to="/index/example/index">案例</router-link>
        </li>
        <li>
          <router-link to="/index/news/index">社区</router-link>
        </li>
        <li>
          <router-link to="/index/about/index">我们</router-link>
        </li>
      </ul>
    </div> -->
    <!-- 地址 -->
    <!-- <div class="marea">
      <div class="marea_cob">
        <p>©2015-2019 All Rights Reserved</p>
        <p>合肥景烨网络科技有限公司 &nbsp;&nbsp;&nbsp;版权所有</p>
        <p>皖ICP备16006561号-2</p>
      </div>
    </div> -->

    <!-- 手机端底部 -->
    <div class="mfooter">
      <div class="lx">
        <span>联系我们</span>
      </div>
      <div class="mf_mobile">
        <div class="to">
          <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/foot1.png" alt="">
          <span>150-0001-7750</span>
        </div>
        <p>周一至周日：9:00-21:00</p>
      </div>
      <div class="mf_area">
        <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/foot2.png" alt="">
        <span>合肥市滨湖新区未来塔A座710室</span>
      </div>
    </div>
    <div class="mfoot_beian">
      <span>
        ©2019 All Rights Reserved 合肥景烨网络科技有限公司
      </span>
      <span>
        皖ICP备16006561号-2
      </span>
      <div class="beianhao">
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=34011102001703" style="display:inline-block;text-decoration:none;">
          <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/foot4.png" />
          <p style="float:left; color:#9c9c9c;">皖公网安备 34011102001703号</p>
        </a>
      </div>
    </div>
    <!-- 预约弹框 -->
    <div class="appointment" v-if="flag">
      <div class="appointment_con">
        <div class="err" @click="close"></div>
        <h2>
          提交定制开发需求
          <span>多一次咨询，多一个选择</span>
        </h2>
        <p>联系我们，免费获得专属策划方案</p>
        <div class="xq">
          <div class="memo">
            <textarea name class="need" placeholder="一句话描述自己的需求" maxlength="20" v-model="demand" @input="memNum"></textarea>
            <div class="memo_num">
              <span>{{memoNum}}</span>
              /
              <span>20</span>
            </div>
          </div>

          <input class="name" placeholder="请输入姓名" type="text" v-model="name" />
          <input class="phone" placeholder="请输入手机号码" type="number" v-model="mobile" />
        </div>
        <div class="btn" @click="submit">
          <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/tj.png" />
          <span>提交评估</span>
        </div>
      </div>
    </div>
    <!-- <div class="load"></div> -->
    <!-- 底部定位 -->
    <div class="mConsultation">
      <ul>
        <li>
          <router-link to="/index/index/index">
            <div :class="['pic',routerHome?'pic_h':'']"></div>
            <span :class="routerHome?'he':''">首页</span>
          </router-link>
        </li>
        <li>
          <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=403176253&amp;site=qq&amp;menu=yes" target="_blank">
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/zx01-2.png" alt />
            <span>咨询</span>
          </a>
        </li>
        <li @click="appointment">
          <img v-if="!flag" src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/yx01-2.png" alt />
          <img v-else src="https://jingye.oss-cn-qingdao.aliyuncs.com/homem/yuyue1.png" alt />
          <span :class="flag?'yy':''">预约</span>
        </li>
      </ul>
      <div class="right">
        <a :href="'tel:' + 15000017750">
          <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/mobile01-2.png" alt />
          <span>拨打电话</span>
        </a>
      </div>
    </div>
    <!-- 回到顶部 -->
    <!-- <div class="m_toTop"></div> -->
    <!-- 遮罩层 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      routerHome: false,
      nav: [
        { name: '首页', path: '/index/index/index' },
        { name: '服务', path: '/index/Website/index' },
        { name: '案例', path: '/index/example/index' },
        { name: '社区', path: '/index/newx/index' },
        { name: '关于景烨', path: '/index/about/index' }
      ],
      demand: '', //需求
      name: '', //姓名
      mobile: '', // 手机
      demandNum: 0,
      memoNum: 0,
      scrollTop: 0,
      flag: false,
      loading: false
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.routerHome = true
  },
  // created() {
  //   this.torouter();
  // },
  watch: {
    '$route.path'(newVal, oldVal) {
      // console.log(newVal)
      // if (newVal === "index/index/index") {
      //   // this.routerHome = true;
      //   console.log(11);
      // }
      // this.routerHome = newVal;
      // console.log(this.routerHome);
      if (newVal != oldVal) {
        // this.torouter();
      }
      if (newVal == '/index/index/index') {
        // console.log(11)
        this.routerHome = true
      } else {
        this.routerHome = false
      }
      // console.log(this.routerHome)
    }
  },
  methods: {
    //  判断跳转路由的方向
    torouter() {
      if (this.$route.path == '/index/index/index') {
        // console.log(2);
        this.routerHome = true
      }
    },
    tonav(item) {
      if (this.$route.path == item.path) return
      // console.log(this.$route);
      this.$router.push(item.path)
    },

    // tohome() {
    //   this.$router.push("/index/about/index ");
    //   console.log(this.$router.push);
    // },
    // 提交需求
    memNum(e) {
      // console.log(e.target.value.length)
      this.memoNum = e.target.value.length
    },
    inputL(e) {
      // console.log(e.target.value.length);
      this.demandNum = e.target.value.length
    },
    submit() {
      // console.log(this.demand)

      this.ajaxs('index/addMsg', {
        data: { memo: this.demand, name: this.name, mobile: this.mobile },
        success: res => {
          if (res.code == 0) {
            return alert(res.msg)
          }
          if (!/^1[3456789]\d{9}$/.test(this.mobile)) {
            alert('手机号格式不正确,请输入正确的手机号')
            return false
          }
          if (res.code == 1) {
            alert(res.msg)
            ;(this.demand = ''), (this.name = ''), (this.mobile = '')
            this.demandNum = this.demand.length
          }
        }
      })
    },

    // input框的监听事件
    // change() {
    //   this.demandNum = this.demand.length;
    //   console.log(111);
    //   // // console.log(this.demandNum);
    // },
    handleScroll(e) {
      var scrollTop = e.target.documentElement.scrollTop || e.target.body.scrollTop // 执行代码

      this.scrollTop = scrollTop
    },
    backTop() {
      this.$emit('backTops', 0)
    },
    appointment() {
      this.flag = true
      // eslint-disable-next-line no-console
      console.log(11)
      this.$emit('closeL', 111)
      var mo = function(e) {
        e.preventDefault()
      }
      document.body.style.overflow = 'hidden'
      document.addEventListener('touchmove', mo, false) //禁止页面滑动
    },
    close() {
      this.flag = false
      this.$emit('closeL', this.flag)
      var mo = function(e) {
        e.preventDefault()
      }
      document.body.style.overflow = '' //出现滚动条
      document.removeEventListener('touchmove', mo, false)
    }
  }
}
</script>

<style scoped>
@import url('../../assets/css/footer/index.css');
@import url('../../assets/css/footer/mindex.css');
</style>
